<template>
  <div>
    <el-dialog
      :title="dialogParam.title"
      :visible="dialogParam.dialogVisible"
      width="30%"
    >
      <el-row>
        <el-col>
          <label>用户名</label>
          <el-input
            v-model="dialogParam.user.username"
            size="medium"
            placeholder="请输入用户名"
          >
          </el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <label>密码</label>
          <el-input
            v-model="dialogParam.user.password"
            size="medium"
            placeholder="请输入密码"
          >
          </el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <label>姓名</label>
          <el-input
            v-model="dialogParam.user.name"
            size="medium"
            placeholder="请输入姓名"
          >
          </el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <label>手机号</label>
          <el-input
            v-model="dialogParam.user.phone"
            size="medium"
            placeholder="请输入手机号"
          >
          </el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <label>头像</label>
          <br />
          <el-image
            style="width: 100px; height: 100px"
            :src="dialogParam.user.headUrl"
            fit="contain"
          ></el-image>
          <br />
          <el-upload
            ref="upload"
            :action="addressOss"
            :show-file-list="false"
            :on-change="beforeUpload"
            :on-success="handleSuccess"
            :data="dataOss"
            :auto-upload="true"
            accept=".jpg"
            :multiple="false"
          >
            <el-button size="small" type="primary" @click="initSign">上传头像</el-button>
          </el-upload>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <label>用户描述</label>
          <el-input
            v-model="dialogParam.user.description"
            size="medium"
            placeholder="请输入用户描述"
          >
          </el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <label>是否启用</label>
          <br />
          <el-switch
            v-model="dialogParam.user.status"
            active-text="正常"
            inactive-text="停用"
            :active-value="1"
            :inactive-value="0"
          >
          </el-switch>
        </el-col>
      </el-row>
      <span slot="footer">
        <el-button @click="dialogParam.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitUser">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { insertUser, updateUser, getSign } from "@/api/user/user";

export default {
  name: "",
  components: {},
  props: ["dialogParam", "getAllUser"],
  data() {
    return {
      addressOss: "",
      dataOss: {
        key: "",
        ossaccessKeyId: "",
        policy: "",
        signature: "",
      },
    };
  },
  computed: {},
  watch: {},
  methods: {
    handleSuccess() {
      this.dialogParam.user.headUrl = this.addressOss + "/" + this.dataOss.key;
    },
    beforeUpload(file, fileList) {
      let date = new Date();
      this.dataOss.key =
        this.dataOss.key +
        "/" +
        file.name.substring(0, file.name.length - 4) +
        date.getTime() +
        file.name.substring(file.name.length - 4);
    },
    initSign() {
      getSign().then((res) => {
        let data = res.data;
        this.addressOss = data.host;
        this.dataOss.key = data.dir;
        this.dataOss.ossaccessKeyId = data.OSSAccessKeyId;
        this.dataOss.policy = data.policy;
        this.dataOss.signature = data.Signature;
      });
    },
    submitUser() {
      if (this.dialogParam.state == "insert") {
        insertUser(this.dialogParam.user).then((res) => {
          if (res.data) {
            this.$message.success("添加成功");
          } else {
            this.$message.error("添加失败");
          }
          this.getAllUser();
        });
      } else if (this.dialogParam.state == "update") {
        updateUser(this.dialogParam.user).then((res) => {
          if (res.data) {
            this.$message.success("修改成功");
          } else {
            this.$message.error("修改失败");
          }
          this.getAllUser();
        });
      }
      this.dialogParam.dialogVisible = false;
    },
  },
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>
<style scoped>
.small-margin-bottom {
  margin-bottom: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>